<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>青芽医疗</title>
    <style type="text/css">
        .el-header {
            background-color: #545c64;
        }

        .header-img {
            width: 100px;
            margin-top: 20px;
        }

        .face {
            margin-top: 5px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: whitesmoke;
            line-height: 60px;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .text{
            float: right;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }
        .avatar {
            width: 78px;
            height: 78px;
            display: block;
        }
    </style>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
	<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <el-container>
        <!--头部区域-->
        <el-header class="el-header" style="height: 60px">
            <!--水平排列，根据el-container的特点，添加该组件-->
            <el-container>
                <!--logo图片-->
                <div>
<!--                    <el-image src="/img/export.png" class="header-img"></el-image>-->
                    <div style="margin-top: 10px;float: left;float: right;color: white;font-family: 微软雅黑;font-size: 28px">青芽医疗管理系统</div>
                </div>
                <!--顶部导航-->
                <el-dropdown style="margin-left: auto;padding-right: 20px">
                         <span class="el-dropdown-link">
                             <img :src="userForm.photoUrl" class="face"/>
                             <div class="text">姓名：{{userForm.name}}<i class="el-icon-arrow-down el-icon--right"></i></div>
                          </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item divided @click.native="logout()">注销退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-container>
        </el-header>
        <el-container style="height: 843px; border: 1px solid #eee">
            <!--侧边栏区域-->
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)" id="aside">
                <el-menu unique-opened="true">
                    <el-submenu :index="item.orderNumber" v-for="(item,index) in menuList">
                        <template slot="title">
                            <i :class="item.menuIcon"></i>{{item.menuName}}
                        </template>
                        <el-menu-item-group>
                            <el-menu-item :index="child.orderNumber" @click="toHtml(child.menuUrl)" v-for="child in item.children">
                                <i :class="child.menuIcon"></i>{{child.menuName}}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!--主区域-->
            <el-container>
                <el-main>
                    <iframe id="myframe" false="false" :src="iframeSrc" scrolling="none" frameborder="0"
                            style="top:80px;left: 120px; width: 100%;height:99%"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>
<script type="application/javascript">
    new Vue({
            el: '#div',
            data: {
                dialogFormVisible:false,
                userForm: {},
                rules: {
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ],
                    checkPass: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ]
                },
                url: '/img/img.jpg',
                iframeSrc: '/toShowPatient',
                menuList:[],
            },
            mounted(){
                this.getUserInfo();
            },
            methods: {
                getUserInfo(){
                    axios.post("/user/getMenuByUserId").then(res=>{
                        this.menuList=res.data;
                    });
                    axios.post("/user/getSessionUser").then(res=>{
                        this.userForm = res.data;
                    });
                },
                toHtml(page){
                    this.iframeSrc = page;
                },
                showEditUserView(){
                    this.dialogFormVisible=true;
                },
                logout(){
                    //请求后台，在Servlet中注销用户
                    axios.post("/user/logout").then(res=>{
                        //跳转到登录页面
                        location.href='/tologin';
                    });
                },
                //上传成功
                handleAvatarSuccess(res, file) {
                    this.userForm.headUrl = URL.createObjectURL(file.raw);
                },
                //上传前准备
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                    this.dialogFormVisible=false;
                },
            }
        }
    );
</script>
</html>
